// hooks是react16.8版本之后才有的
// hooks只能给函数组件用的
// 函数组件式具有比类组件更好的性能,但是之前函数组件的功能比较少，它只能去渲染一些简单的页面
// 最多接受一下props，但是不能有自己的state和生命周期

// hooks是增强了函数组件的功能
// 自定义hooks(类似于vue3里面的组合式api)，将相同的功能代码进行聚合，封装，复用(功能复用)
// 可以用来代替高阶组件，高阶组件在使用中会使得组件层级变深，hooks是不会的

// 因为新版本推荐我们使用函数组件，所以hooks就变得非常重要了
// hooks约定用use开头
// hooks只能在函数组件的第一层进行调用

import React, { useState } from "react";

const App = () => {
  // useState是允许我们在函数组件里面来定义state的
  // 需要传入一个参数，会作为state变量的初始值
  // 返回一个数组，分别是state变量和改变这个变量的方法
  // useState是可以被多次调用的
  const [count, setCount] = useState(10);
  const handleClick = () => {
    // 如果改变后的值是一个固定值，直接当参数传入
    // 如果改变后的值要依赖于前一次的值，需要传入函数
    // setCount(20);

    // 改变数据的方法是异步的
    // 如果想拿到改变以后的值，光有useState是做不到的,需要和useEffect一起配合使用
    setCount((v) => v + 1);
    console.log(count);
  };

  const [name] = useState("tom");

  return (
    <>
      <h2>useState</h2>
      <p>count: {count}</p>
      <button onClick={handleClick}>count++</button>
      <p>name: {name}</p>
    </>
  );
};

export default App;
